<template>
  <div class="analyse-funnel tag-scrollbar">
    <el-row>
      <el-col :span="12" v-for="(item, index) in funnelList" :key="index">
        <div class="chart" :id="'analyse-chart-' + index"></div>
      </el-col>
    </el-row>
    <funnel-dropdown ref="funnelDropdown"></funnel-dropdown>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import funnelDropdown from './funnel-dropdown'
export default {
  components: {
    funnelDropdown
  },
  props: {
    funnelList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  watch: {
    funnelList: {
      handler() {
        this.initChart()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        this.setChart()
      })
    },
    setChart() {
      this.funnelList.forEach((funnel, funnelIndex) => {
        var analyseFunnel = document.getElementById('analyse-chart-' + funnelIndex)
        var myChart = echarts.init(analyseFunnel)
        let funnelResult = []
        this.funnelList[funnelIndex].result.resultList.forEach((item, index) => {
          funnelResult.push({
            value: item,
            name: this.funnelList[funnelIndex].result.resultName[index],
            tagId: this.funnelList[funnelIndex].result.resultParam[index].tagId
          })
        })
        var option = {
          title: {
            text: this.funnelList[funnelIndex].result_name
          },
          // tooltip: {
          //   trigger: 'item',
          //   formatter: '{b}<br/>数值：{c}'
          // },
          series: [
            {
              type: 'funnel',
              width: '60%',
              height: '80%',
              top: '15%',
              bottom: '10%',
              left: '10%',
              right: '10%',
              gap: 2,
              // min: 0,
              // max: 100,
              // minSize: '0%',
              // maxSize: '100%',
              // sort: 'none',
              itemStyle: {
                opacity: 0.7
              },
              emphasis: {
                label: {
                  fontSize: 16,
                  formatter: '{b}：{c}'
                }
              },
              data: funnelResult
            }
          ]
        }
        option && myChart.setOption(option)
        // myChart.on('click', params => {
        //   this.$refs.funnelDropdown.showDropdown(params)
        // })
      })
    }
  }
}
</script>

<style lang="scss">
.analyse-funnel {
  border-bottom: 2px solid #fff;
  background: #f5f7fa;
  overflow-y: auto;
  .chart {
    padding: 10px 20px;
    background-color: #fff;
    margin: 10px;
    height: 300px;
  }
}
</style>
